<template>
  <div class="singer_wrap">
    <el-container>
      <el-header height="300px">
        <div class="wrap">
          <div class="img">
            <!-- <img :src="playList.coverImgUrl" alt="" /> -->
            <el-image
              lazy
              :preview-src-list="[singerIntroduce.cover]"
              :src="singerIntroduce.cover"
              fit="cover"
            ></el-image>
          </div>
          <div class="title">
            <div class="head-name">
              <div class="name">{{ singerIntroduce.name }}</div>
            </div>
            <!-- 作者信息 -->
            <div class="creator">
              <!-- 作者名 -->
              <span> 艺人 </span>
              <!-- 创建时间 -->
              <div>
                {{ singerIntroduce.musicSize }}首歌·
                {{ singerIntroduce.albumSize }}张专辑·{{
                  singerIntroduce.mvSize
                }}个MV 创建
              </div>
            </div>
            <div class="intro">
              <div>
                {{ singerIntroduce.briefDesc }}
              </div>
            </div>
            <div class="button">
              <el-button
                @click="startSong"
                type="primary"
                class="iconfont icon-24gf-play play"
              >
                播放</el-button
              >
              <!-- <el-button type="primary" class="iconfont icon-24gf-play play">
                关注</el-button
              > -->
            </div>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import { getSingerInfo, getSingerSongs } from "@/util/music.js";
import { Follow } from "@/util/userinfo.js";
import { mapGetters } from "vuex";

export default {
  name: "Singerinfo",

  data() {
    return {
      singerId: this.$route.params.id,
      singerIntroduce: {},
      songList: [],
    };
  },

  created() {
    this.getSingerInfo();
    this.getSingerSongs();
  },
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
    ]),
    ...mapGetters("userInfo", ["loginStatus"]),
  },

  methods: {
    //获取歌手详情
    async getSingerInfo() {
      let {
        data: { data },
      } = await getSingerInfo(this.singerId);
      // console.log(data);
      this.singerIntroduce = data.artist;
    },
    async getSingerSongs() {
      let { data } = await getSingerSongs(this.singerId);
      // console.log(data);
      this.songList = data.hotSongs;
    },
    //播放歌曲
    async startSong() {
      //保存当前播放列表
      this.$store.dispatch("musicPlay/savePlayList", this.songList);
      sessionStorage.setItem("playList", JSON.stringify(this.songList));

      //保存播放状态
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", this.songList[0].id);
      sessionStorage.setItem("songId", this.songList[0].id);
    },
    //获取关注
    async Follow(id) {
      let { data } = await Follow(id);
      console.log(data);
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  margin-top: 20px;
  // padding: 0 8.25rem;
  .wrap {
    // padding: 0 15px;
    display: flex;
    height: 100%;
    .img .el-image {
      width: 280px;
      height: 280px;
      /* height: 100%; */
      border-radius: 50%;
      // box-shadow: 10px 10px 10px transparent;
      box-shadow: 6px 4px 10px rgba(145, 206, 206, 0.774);
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40px;
      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 50px;
      }
      .creator {
        span {
          font-size: 17px;
        }
        div {
          margin-top: 5px;
          font-size: 14px;
          color: rgb(121, 118, 118);
        }
      }
      .intro {
        div {
          text-align: justify;
          text-justify: inter-ideograph;
          font-size: 15px;
          height: 60px;
          color: rgb(121, 118, 118);
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }
      .button {
        display: flex;
        .play {
          background-color: #eaeffd;
          border: none;
          color: #335eea;
          font-size: 17px;
          font-weight: 600;
        }
        .play:hover {
          transform: scale(1.1);
        }
        .shoucang:hover {
          transform: scale(1.1);
        }
        .shoucang {
          background-color: rgb(224, 219, 219);
          border: none;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #333;
        }
      }
    }
  }
}
</style>